<template>
  <div>
    <div class="ui  info attached message" v-if='$store.state.isDetail'>
      <p>{{val}}</p>
    </div>
    <template v-else>
      <input type="text" v-validate="field.valid||{}" :data-vv-as="field.title" v-model.trim="val" :name="field.name"
             :placeholder="placeholder">
      <errmsg v-show="errors.has(field.name)">
        {{ errors.first(field.name) }}
      </errmsg>
    </template>
  </div>
</template>

<script type="text/ecmascript-6">
  import tool from 'src/util/tool';
  import util from '_util/index';

  import errmsg from 'components/valid/errmsg';
  const store = util.store

  export default {
    data() {
      return {
        val: '',
      }
    },
    components: {errmsg},
    methods: {},
    watch: {
      val: function (val, old) {
        if (val != old) {
          this.$emit('setVo', this.field.name, val)
        }
      },
      hasError: function (val, old) {
        store.push(this, 'setVoError', 'voErrors', this.field.name, this.errors.first(this.field.name))
      }
    },
    computed: {
      placeholder() {
        return `请输入${this.field.title}`
      },
      hasError(){
        return this.errors.has(this.field.name)
      }
    },
    props: ['field'],
    created() {
      this.val = this.field.fval
    },
    mounted() {
    }
  };
</script>

<style scoped>
  .field {
  }
</style>
